<template>
    <div class="order-apply-invoice">
      <div ref="chartContainer" style="width: 100%; height: 400px;"></div>
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, watch, onBeforeUnmount, nextTick } from 'vue'
import * as echarts from 'echarts'
const props = defineProps({
  config: {
        type: Object,
        default:() => ({
            xAxisData: [],
            yAxisData: [],
            legendName:''
        })
    }
})
const chartContainer = ref<HTMLElement | null>(null)
let chartInstance: echarts.ECharts | null = null
// 初始化图表
const initChart = ()=> {
    if (!chartContainer.value) return
  
    // 销毁旧实例（避免内存泄漏）
    if (chartInstance) {
        chartInstance.dispose()
        chartInstance = null
    }

    // 创建新实例
    chartInstance = echarts.init(chartContainer.value)
    updateChart()
}
// 更新图表数据
const updateChart = () => {
  if (!chartInstance || !props.config) return
  
  const option = {
    legend: {
        right: '50px',
        top: '20px',
        data: [props.config.legendName]
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: Array.from(props.config.xAxisData),
      axisLabel: {
        rotate: 30, // 标签旋转防止重叠
        interval: 0 // 强制显示所有标签
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value}' // 可以添加单位如 '{value}个'
      }
    },
    series: [{
      name:props.config.legendName,
      data: Array.from(props.config.yAxisData),
      type: 'line',
      smooth: true, // 平滑曲线
      symbol: 'circle', // 数据点形状
      symbolSize: 8, // 数据点大小
    //   lineStyle: {
    //     width: 3,
    //     color: '#5470c6'
    //   },
    //   itemStyle: {
    //     color: '#5470c6'
    //   },
    //   label: {
    //     show: true, // 显示数值标签
    //     position: 'top',
    //     formatter: '{c}'
    //   },
      areaStyle: { // 可选：添加区域填充效果
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(84, 112, 198, 0.5)' },
          { offset: 1, color: 'rgba(84, 112, 198, 0.1)' }
        ])
      }
    }],
    tooltip: { // 添加提示框
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    // dataZoom: [{ // 添加缩放功能
    //   type: 'slider',
    //   show: true,
    //   start: 0,
    //   end: 100
    // }]
  }
  
  chartInstance.setOption(option)
  chartInstance.resize() // 确保图表正确渲染
}

// 监听配置变化
watch(() => props.config, (newVal) => {
  if (newVal.xAxisData?.length > 0 && newVal.yAxisData?.length > 0) {
    if (!chartInstance) {
      initChart()
    } else {
      updateChart()
    }
  }
}, { deep: true })

// 组件挂载时初始化
onMounted(() => {
  nextTick(() => {
    if (props.config.xAxisData?.length > 0 && props.config.yAxisData?.length > 0) {
      initChart()
    }
  })
})

// 组件卸载时销毁实例
onBeforeUnmount(() => {
  if (chartInstance) {
    chartInstance.dispose()
    chartInstance = null
  }
})

// 暴露方法给父组件
defineExpose({
  getChartInstance: () => chartInstance
})
</script>
<style lang="scss" scoped></style>